<!--
  预览页面 - Preview.vue
  这是数据大屏的预览页面，用于展示最终的设计效果
  页面特点：全屏显示、自适应缩放、只读模式
-->
<template>
  <div class="preview">
    <!-- 顶部工具栏：提供返回和全屏功能 -->
    <div class="preview-toolbar">
      <!-- 返回按钮：回到编辑页面 -->
      <el-button @click="goBack" :icon="ArrowLeft" type="primary">
        返回编辑
      </el-button>
      
      <!-- 中间标题 -->
      <div class="toolbar-center">
        <span class="preview-title">预览模式</span>
      </div>
      
      <!-- 全屏按钮：切换全屏显示 -->
      <div class="toolbar-right">
        <el-button @click="toggleFullscreen" :icon="FullScreen">
          全屏
        </el-button>
      </div>
    </div>

    <!-- 预览画布：显示设计好的数据大屏 -->
    <div class="preview-canvas" ref="previewRef">
      <!-- 画布容器：应用画布配置和自适应缩放 -->
      <div 
        class="canvas-container"
        :style="{
          width: canvasConfig.width + 'px',           // 画布宽度
          height: canvasConfig.height + 'px',         // 画布高度
          backgroundColor: canvasConfig.backgroundColor,  // 背景颜色
          backgroundImage: canvasConfig.backgroundImage ? `url(${canvasConfig.backgroundImage})` : 'none',  // 背景图片
          transform: `scale(${scale})`,               // 缩放变换
          transformOrigin: 'center center'            // 缩放中心点
        }"
      >
        <!-- 渲染所有组件：遍历组件列表并显示 -->
        <div
          v-for="component in components"
          :key="component.id"
          class="preview-component"
          :style="{
            position: 'absolute',                       // 绝对定位
            left: component.style.left + 'px',         // X坐标
            top: component.style.top + 'px',           // Y坐标
            width: component.style.width + 'px',       // 宽度
            height: component.style.height + 'px',     // 高度
            zIndex: component.style.zIndex,            // 层级
            opacity: component.style.opacity,          // 透明度
            transform: `rotate(${component.style.rotate}deg)`,  // 旋转角度
            borderRadius: component.style.borderRadius + 'px',  // 圆角
            backgroundColor: component.style.backgroundColor,    // 背景颜色
            border: component.style.border             // 边框
          }"
        >
          <!-- 组件渲染器：根据组件类型渲染具体内容 -->
          <ComponentRenderer :component="component" />
        </div>
      </div>
    </div>
  </div>
</template>

<!--
  预览页面的脚本部分
  负责加载保存的数据、计算自适应缩放、处理用户交互
-->
<script setup lang="ts">
// 导入Vue相关功能
import { ref, computed, onMounted, onUnmounted } from 'vue'  // Vue响应式API和生命周期
import { useRouter } from 'vue-router'                      // 路由功能

// 导入Element Plus图标
import { ArrowLeft, FullScreen } from '@element-plus/icons-vue'  // 箭头和全屏图标

// 导入组件和类型
import ComponentRenderer from '@/components/ComponentRenderer.vue'  // 组件渲染器
import type { Component } from '@/types'                           // 组件类型定义

// 初始化路由
const router = useRouter()  // 路由实例，用于页面跳转

// 预览容器的引用
const previewRef = ref<HTMLElement>()  // 用于获取预览容器的DOM元素

/**
 * 从本地存储加载保存的数据
 * 包括组件列表和画布配置
 * @returns 包含组件和画布配置的数据对象
 */
const loadData = () => {
  // 从localStorage获取保存的数据
  const savedData = localStorage.getItem('vue-drag-screen-data')
  
  if (savedData) {
    // 如果有保存的数据，解析并返回
    return JSON.parse(savedData)
  }
  
  // 如果没有保存的数据，返回默认配置
  return {
    components: [],           // 空的组件列表
    canvasConfig: {          // 默认画布配置
      width: 1920,           // 默认宽度
      height: 1080,          // 默认高度
      backgroundColor: '#0c1426',  // 默认背景颜色
      backgroundImage: ''    // 无背景图片
    }
  }
}

// 加载数据并创建响应式引用
const data = loadData()
const components = ref<Component[]>(data.components)      // 组件列表
const canvasConfig = ref(data.canvasConfig)             // 画布配置

// 缩放比例：用于自适应不同屏幕尺寸
const scale = ref(1)

/**
 * 计算自适应缩放比例
 * 根据容器大小和画布大小计算合适的缩放比例
 * 确保画布能完整显示在屏幕中
 */
const calculateScale = () => {
  if (!previewRef.value) return  // 如果容器还未挂载，直接返回
  
  const container = previewRef.value
  const containerWidth = container.clientWidth           // 容器宽度
  const containerHeight = container.clientHeight - 60   // 容器高度（减去工具栏高度）
  
  // 计算宽度和高度的缩放比例
  const scaleX = containerWidth / canvasConfig.value.width
  const scaleY = containerHeight / canvasConfig.value.height
  
  // 选择较小的缩放比例，确保画布完整显示，且不超过原始大小
  scale.value = Math.min(scaleX, scaleY, 1)
}

/**
 * 返回编辑页面
 * 跳转回工作台继续编辑
 */
const goBack = () => {
  router.push('/workspace')
}

/**
 * 切换全屏模式
 * 进入或退出全屏显示
 */
const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    // 当前不是全屏，进入全屏
    previewRef.value?.requestFullscreen()
  } else {
    // 当前是全屏，退出全屏
    document.exitFullscreen()
  }
}

/**
 * 窗口大小变化处理函数
 * 当浏览器窗口大小改变时，重新计算缩放比例
 */
const handleResize = () => {
  calculateScale()
}

/**
 * 组件挂载时的初始化
 * 计算初始缩放比例并监听窗口大小变化
 */
onMounted(() => {
  calculateScale()                              // 计算初始缩放比例
  window.addEventListener('resize', handleResize)  // 监听窗口大小变化
})

/**
 * 组件卸载时的清理
 * 移除事件监听器，防止内存泄漏
 */
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)  // 移除窗口大小变化监听
})
</script>

<style scoped>
.preview {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #000;
  color: #fff;
}

.preview-toolbar {
  height: 60px;
  background: rgba(0, 0, 0, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: relative;
  z-index: 1000;
}

.toolbar-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.preview-title {
  font-size: 16px;
  font-weight: 500;
}

.preview-canvas {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}

.canvas-container {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.preview-component {
  pointer-events: none;
}

/* 全屏时隐藏工具栏 */
:fullscreen .preview-toolbar {
  display: none;
}

:fullscreen .preview-canvas {
  height: 100vh;
}
</style>